<template>
	<view class="sort-HNTList">
		<view class="boxs">
		<view class="box">
			<!-- 图片 -->
			<view class="img">
				<image :src="list.goods_image" mode="aspectFill"></image>
			</view>
			<!-- 内容 -->
			<view class="content">
				<!-- 上部分 -->
				<view class="title">{{list.title}}<text class="titleMSg">{{list.titleMsg}}</text></view>
				<!-- 下部分 -->
				<view class="foot">
					<view class="left">
						<view>结算周期:{{list.settlement_cycle}}</view>
						<view>管理费:{{list.guard_cost}}%</view>
					</view>
					<view class="right">
						<view>合约周期:{{list.contract_cycle}}{{$t('sortFIL.sort-order.day')}}</view>
						<view>预计年化率:{{list.estimated_annualized_rate}}%</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view>价格:<text class="price">{{list.goods_price}}</text><text class="danwei">USDT</text></view>
			<button type="default" @click="goFIL">{{$t('sortFIL.sort-FILList.buy')}}</button>
		</view>
		</view>
	</view>
</template>

<script>
	import api from '../../common/api.js'
	export default {
		props:['list'],
		data() {
			return {
				
			};
		},
		methods:{
			goFIL(){
				console.log(this.list.id);
				uni.navigateTo({
					url:'../../pages/sort-info/sort-info?id='+this.list.id
				})
			}
		},
		created() {
			// 拼接图片地址
			this.list.goods_image=api.HOST+this.list.goods_image
		},
		onReady() {
			
		}
	}
</script>

<style scoped>
	.boxs{
		width: 94%;
		margin: auto;
		background-color: #FFFFFF;
		box-shadow: 0 0 6rpx 10rpx rgba(0,0,0,.06);
		padding-bottom: 20rpx;
	}
.box{
	display: flex ;
}
.img{
	margin-top: 40rpx;
	margin-left: 40rpx;
	margin-right: 30rpx;
	width: 222rpx;
	height: 140rpx;
	border-radius: 20rpx;
	overflow: hidden;
	display: flex;
	justify-content: center;
}
image{
	width: 100%;
	height: 100%;
	
}
.title{
	margin-top: 20px;
	font-size: 1em;
	font-weight: bold;
	color: #005FDB;
}
.titleMSg{
	padding-left: 10rpx;
	font-size: 1em;
}
.foot{
	display: flex;
}
.left{
	width: 200rpx;
	display: flex;
	flex-wrap: wrap;
	font-size: .7em;
	color: #959595;
}
.left>view{
	margin: 10rpx 0;
}
.right{
	width: 240rpx;
	display: flex;
	flex-wrap: wrap;
	font-size: .7em;
	color: #959595;
}
.right>view{
	margin: 10rpx 0;
}
.footer{
	width: 100%;
	/* position: absolute;
	bottom: 20rpx; */
	display: flex;
	color: #959595;
}
.footer>view{
	margin-left: 20rpx;
	margin-top: 10rpx;
}
.price{
	font-size: 1.4em;
	color: #FF0000;
}
.danwei{
	padding-left: 20rpx;
}
.footer>button{
	width: 240rpx;
	height: 60rpx;
	line-height: 60rpx;
	color: #FFFFFF;
	background-color: #005FDB;
	margin-right: 20rpx;
}
</style>
